<template>
    <div class="view">
        <div class="navigation">
            <!-- <div style="height: 50.333px;background-color:#FFF;">

            </div> -->
            <div class="navigation-title">
                <a :href="`/#/archive/${archiveId}`">
                    {{archive.name}}
                </a>
            </div>
            <hr>
            <nav>
                <ul class="ul-navigation">
                    <li v-for="doc in archive.docs" :key="doc.docId">
                        <a :href="`/#/archive/${archiveId}/doc/${doc.docId}`" class="li-navigation"> 
                            <i class="el-icon-document iconfont"></i> {{doc.docName}}</a>
                    </li>

                </ul>
            </nav>
        </div>
        
        <div class="container">
            <div class="header">
                <a class="btn pull-right" aria-label="" href="/#/">
                    <i class="el-icon-house iconfont"></i> <span>首页</span>
                </a>
                <a class="btn pull-right" aria-label="" @click="addDocumentClick()">
                    <i class="el-icon-document-add iconfont"></i> <span>新建</span>
                </a>
            </div>
            <div class="main">
                <div class="main-title">
                    <h1>{{ archive.name }}</h1>
                </div>
                <hr>
                <div class="main-body"> 此为文集：{{ archive.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'archive-view',
    props: {
        archiveId: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            archive: {
                id: 1,
                name: "文集1",
                docs: [
                    {
                        docId: 1,
                        docName: "文档1"
                    },
                    {
                        docId: 2,
                        docName: "文档2"
                    },
                    {
                        docId: 3,
                        docName: "文档3"
                    },
                ]
            },
            userId:1
        }
    },
    created(){
        this.userId = parseInt(localStorage.getItem('userId'));

        this.$axios.get('http://localhost:8001/archive/getUserArchive', {params:{
            userId:this.userId
        }}).then(res=>{
            console.log('获得文集数据为：');
            console.log(res.data);
            console.log('文档数据为：')
            for(let arc of res.data){
                console.log(arc);
                if(arc.archiveId == this.archiveId){
                    this.$set(this.archive, 'name', arc.archiveName);
                    this.$set(this.archive, 'id', arc.archiveId);
                    this.$axios.get('http://localhost:8001/archive/searchArchive', {params: {
                        archiveId: arc.archiveId
                    }}).then(res => {
                        console.log('文档列表数据为：');
                        console.log(res.data);
                        this.$set(this.archive, 'docs', res.data);
                    }).catch(err => {
                        console.log(err);
                        this.$message({
                            type: 'error',
                            message: "加载失败"
                        });
                    });
                    break;
                }
            }
        }).catch(err => {
            console.log(err);  
            this.$message({
                type: 'error',
                message: "加载失败"
            });
        });
    },
    methods:{
        addDocumentClick(){
            console.log("创建新文档");
            this.$prompt('请输入新文档标题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '格式不正确'
                }).then(({ value }) => {
                    this.$axios.post('http://localhost:8001/doc/uploadDoc', {
                        document: {
                            userId: this.userId,
                            docName: value,
                            archiveId:this.archiveId
                        },
                        content: ""
                    }).then(()=>{
                        this.$message({
                            type: 'success',
                            message: "创建成功"
                        });
                        window.location.reload();
                    }).catch(err => {
                        console.log(err);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });       
            });
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.view {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    padding: 0px 15px 0px 0px
}

a {
    text-decoration: none;
    color: #333;
}

.navigation {
    color: #333;
    position: fixed;
    /* height: calc(100% - 20px); */
    height: calc(100%);
    background-color: #fafafa;
    /* border-right: 1px solid #e6e6e6; */
    width: 300px;
    overflow: auto;
}

.navigation-title {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 20px 0px 20px;
    text-align: center;
}

hr {
    line-height: 0;
    margin: 10px 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #eee;
    clear: both;
    background: 0 0;
}

.ul-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: top .5s ease;
    -moz-transition: top .5s ease;
    -o-transition: top .5s ease;
    transition: top .5s ease;
}

.li-navigation {
    display: block;
    padding: 10px 15px;
    border-bottom: none;
    /* color: #364149; */
    background: 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.iconfont {
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 300px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex: 1 1 auto;
    display: flex;
    padding: 0;
    max-width: 100%;
    min-width: 0;
    background: #fff;
    flex-direction: column;
    /* padding-bottom: 64px; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    left: 300px;
}

.header {
    font-family: helvetica neue,Helvetica,Arial,sans-serif;
    overflow: visible;
    height: 50px;
    padding: 0 8px 0 8px;
    z-index: 2;
    font-size: .85em;
    color: #7e888b;
    background: 0 0;
    /* width: 100%; 
    position: fixed;
    background-color: #ffffff; */
}

.header-left-item {
    float: left;
}

.header-right-item {
    float: right;
    margin-right: 10px;
}

.header .btn {
    display: block;
    height: 50px;
    padding: 0 15px;
    border-bottom: none;
    color: #ccc;
    text-transform: uppercase;
    line-height: 50px;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    position: relative;
    font-size: 14px;
}

.btn:hover {
    color: black;
}

.main {
    position: relative;
    outline: 0;
    /* top: 50px; */
    max-width: 960px;
    /* margin: 0 auto; */
    padding: 15px 15px 15px 5px;
    flex: 1 1 auto;
    display: block;
    min-width: 100%;
}

.main-title {
    text-align: center;
}

.main-title h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0px;
}

.main-body {
    padding: 5px 20px 20px;
    font-size: 1rem;
    color: #333;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color: #333;
    overflow: hidden;
    font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
    text-align: center;
}
</style>
